<template>
  <div class="content-box">
    <div class="scroll-view-box">
      <el-button class="history-btn" @click="hisDrawer = true" size="small">历史记录</el-button>
      <div class="data-box-left">
        <div class="user-title-box" v-if="$fieldShowFunc('61-xmxx')">项目信息</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="项目名称" v-if="$fieldShowFunc('sfk_xmmc')">
            <div class="justify_4" slot="label">项目名称</div>
            {{ dataObj.project_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="项目编号" v-if="$fieldShowFunc('sfk_xmbh')">
            <div class="justify_4" slot="label">项目编号</div>
            <el-button @click="goToProjectFunc" type="text" style="padding: 0;">{{ dataObj.project_number || '--'
            }}</el-button>
          </el-descriptions-item>
          <el-descriptions-item label="项目品牌" v-if="$fieldShowFunc('sfk_xmpp')">
            <div class="justify_4" slot="label">项目品牌</div>
            {{ dataObj.brand_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="项目类型" v-if="$fieldShowFunc('sfk_xmlx')">
            <div class="justify_4" slot="label">项目类型</div>
            {{ dataObj.store_type_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(5, 0, 0)" :key="key"></el-descriptions-item>
        </el-descriptions>
        <div class="user-title-box" v-if="$fieldShowFunc('61-skd')">收款信息</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="收款类型" v-if="$fieldShowFunc('sfk_sklx')">
            <div class="justify_4" slot="label">收款类型</div>
            <span v-if="dataObj.payment_type == 1">勘场费用</span>
            <span v-if="dataObj.payment_type == 2">预付款</span>
            <span v-if="dataObj.payment_type == 3">进度款</span>
            <span v-if="dataObj.payment_type == 4">尾款</span>
            <span v-if="dataObj.payment_type == 5">增项款</span>
            <span v-if="dataObj.payment_type == 6">定金</span>
          </el-descriptions-item>
          <el-descriptions-item label="收款人" v-if="$fieldShowFunc('sfk_skr')">
            <div class="justify_4" slot="label">收款人</div>
            {{ dataObj.submitter || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="收款日期" v-if="$fieldShowFunc('sfk_skrq')">
            <div class="justify_4" slot="label">收款日期</div>
            {{ dataObj.review_at || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="收款金额" v-if="$fieldShowFunc('sfk_skje')">
            <div class="justify_4" slot="label">收款金额</div>
            {{ dataObj.amount_collected }}元
          </el-descriptions-item>
          <el-descriptions-item label="审核状态" v-if="$fieldShowFunc('sfk_skdzt')">
            <div class="justify_4" slot="label">审核状态</div>
            <span v-if="dataObj.review_status == 1">待审核</span>
            <span v-if="dataObj.review_status == 2">审核通过</span>
            <span v-if="dataObj.review_status == 3">审核拒绝</span>
          </el-descriptions-item>
          <el-descriptions-item label="收款账户" v-if="$fieldShowFunc('sfk_skzh')">
            <div class="justify_4" slot="label">收款账户</div>
            {{ dataObj.receiving_account || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="收款凭证" v-if="$fieldShowFunc('sfk_skpz')">
            <div class="justify_4" slot="label">收款凭证</div>
            <div class="file-box-img-box flex a">
              <div class="file-box-img" v-for="(item, index) in dataObj.voucher_file" :key="index"
                @click="$fileViewHandle(item)">
                <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                  <img @click="$fileViewHandle(item)" class="img" :src="$fileImgFunc(item)" />
                </el-tooltip>
              </div>
              <span v-if="!dataObj.voucher_file || !dataObj.voucher_file.length">--</span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="已收款" v-if="$fieldShowFunc('sfk_ysk')">
            <div class="justify_4" slot="label">已收款</div>
            {{ dataObj.paid_amount }}元
          </el-descriptions-item>
          <el-descriptions-item label="未收款" v-if="$fieldShowFunc('sfk_wsk')">
            <div class="justify_4" slot="label">未收款</div>
            {{ dataObj.unpaid_amount }}元
          </el-descriptions-item>
          <el-descriptions-item label="结算单" v-if="$fieldShowFunc('sfk_jsd') && dataObj.payment_type == 4">
            <div class="justify_4" slot="label">结算单</div>
            <el-button v-if="dataObj.settlement_number" @click="goToSettlementFunc" type="text" style="padding: 0;">{{
              dataObj.settlement_number || '--'
            }}</el-button>
            <span v-else>--</span>
          </el-descriptions-item>
          <el-descriptions-item label="备注" v-if="$fieldShowFunc('sfk_skbz')">
            <div class="justify_4" slot="label">备注</div>
            {{ dataObj.remark || '--' }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(5, 0, 1, dataObj.payment_type == 4 ? [] : ['sfk_jsd'])"
            :key="key"></el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <!-- 审核区域 -->
    <div class="examine-box" v-if="isExamine">
      <div class="examine-title">审核区域</div>
      <el-form :model="collectionPaymentsFormInline">
        <el-form-item label="是否通过" style="margin-bottom: 0px">
          <el-radio-group v-model="collectionPaymentsFormInline.radio">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审批意见">
          <el-input :rows="4" type="textarea" v-model="collectionPaymentsFormInline.desc" placeholder="审批意见"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="form-btn">
            <el-button type="primary" @click="collectionPaymentsSubmitFunc"
              :loading="receiptReviewLoading">提交</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <!-- 历史弹窗 -->
    <el-drawer @close="hisDrawer = false" title="历史记录" :visible.sync="hisDrawer" :with-header="false" size="600px">
      <div class="right-box">
        <div class="title-box flex ac fw" style="margin: 20px 0 0 10px">历史记录</div>
        <el-timeline class="timeline histroy">
          <template v-if="!dataObj.log_list.length">
            <el-empty description="无历史数据"></el-empty>
          </template>
          <el-timeline-item v-for="(item, index) in dataObj.log_list" :key="index">
            <div class="setp-box">
              <div class="setp-top flex ac jb">
                <p class="time">{{ item.created_at }}</p>
                <div class="user-box flex ac">
                  <img class="avater" :src="item.handlers_image" />
                  {{ item.handlers_name + "-" + item.handlers_position }}
                </div>
              </div>
              <div class="setp-content">
                <div class="title">
                  {{ item.content }}
                </div>

                <template v-if="[140, 290, 510, 350, 410, 490].includes(item.log_status)">
                  <div class="content-table">
                    <div class="flex jb fw">
                      <div class="table-item width-50" v-if="$fieldShowFunc('sfk_skje')">
                        <span class="table-item-title">收款金额</span>
                        <span class="table-item-content">{{
                          item.form_data.amount_collected ? item.form_data.amount_collected + '元' : '--'
                        }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('sfk_skzh')">
                        <span class="table-item-title">收款账户</span>
                        <span class="table-item-content">{{
                          item.form_data.account_name || '--'
                        }}</span>
                      </div>
                      <div class="table-item" v-if="$fieldShowFunc('sfk_sklx')">
                        <span class="table-item-title">收款类型</span>
                        <span class="table-item-content">{{
                          item.form_data.payment_name || '--'
                        }}</span>
                      </div>
                      <div class="table-item fw width-50" v-if="$fieldShowFunc('sfk_skpz')">
                        <span class="table-item-title">收款凭证</span>
                        <div class="img-list-box flex ac fw">
                          <template v-for="(file, index) in item.form_data.payment_voucher">
                            <el-tooltip :key="index" class="item" effect="dark" :content="file.file_name"
                              placement="top">
                              <img @click="$fileViewHandle(file)" :key="index" class="img" :src="$fileImgFunc(file)" />
                            </el-tooltip>
                          </template>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
                <div class="content-table" v-else>
                  <div class="flex jb fw">
                    <div class="table-item" v-if="$fieldShowFunc('sfk_skbz')">
                      <span class="table-item-title">审批意见</span>
                      <span class="table-item-content">{{
                        item.form_data.remark || "--"
                      }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import companyApi from '@/api/companyApi';

export default {
  name: 'collectionPaymentSkdetailPage',
  data() {
    return {
      // 审核
      isExamine: false,
      receiptReviewLoading: false,
      collectionPaymentsFormInline: {
        desc: "",
        radio: 1,
      },
      hisDrawer: false,
      dataObj: {
        log_list: []
      },
    };
  },
  computed: {

  },
  mounted() {
    this.isExamine = this.$route.query.examine || false;
    this.getReceiptDetails();
  },
  methods: {
    // ---------------------------收款单详情------------------------------------
    getReceiptDetails() {
      if (!this.$route.query.id) return;
      companyApi.getReceiptDetails({ voucher_id: this.$route.query.id }).then(res => {
        console.log(res, "收款单详情")
        if (res.code == 200) {
          res.data.log_list.forEach(child => {
            child.form_data = JSON.parse(child.form_data);
            child.form_data.payment_voucher =
              child.form_data.payment_voucher && child.form_data.payment_voucher.length ? child.form_data.payment_voucher : child.form_data.payment_voucherOld;
          })
          this.dataObj = res.data;
        }
      })
    },
    // 审核
    collectionPaymentsSubmitFunc() {
      let collectionPaymentsFormInline = this.collectionPaymentsFormInline;
      switch (collectionPaymentsFormInline.radio) {
        case 1:
          // 客户总监
          if (this.dataObj.voucher_status == 10) {
            this.preliminaryExamination({
              voucher_id: this.$route.query.id,
              remark: collectionPaymentsFormInline.desc,
              state: 1
            })
          }
          // 总经理
          if (this.dataObj.voucher_status == 20) {
            this.reexamineExamination({
              voucher_id: this.$route.query.id,
              remark: collectionPaymentsFormInline.desc,
              state: 1
            })
          }
          // 财务
          if (this.dataObj.voucher_status == 30) {
            this.receiptReviewPassed({
              voucher_id: this.$route.query.id,
              remark: collectionPaymentsFormInline.desc
            })
          }
          break;
        case 2:
          if (!collectionPaymentsFormInline.desc) {
            this.$message.warning('请填写审批意见')
            return;
          }
          // 客户总监
          if (this.dataObj.voucher_status == 10) {
            this.preliminaryExamination({
              voucher_id: this.$route.query.id,
              remark: collectionPaymentsFormInline.desc,
              state: 2
            })
          }
          // 总经理
          if (this.dataObj.voucher_status == 20) {
            this.reexamineExamination({
              voucher_id: this.$route.query.id,
              remark: collectionPaymentsFormInline.desc,
              state: 2
            })
          }
          // 财务
          if (this.dataObj.voucher_status == 30) {
            this.receiptReviewRejected({
              voucher_id: this.$route.query.id,
              remark: collectionPaymentsFormInline.desc
            })
          }
          break;
      }
    },
    // 客户总监审核
    preliminaryExamination(obj) {
      this.receiptReviewLoading = true;
      companyApi.preliminaryExamination(obj).then(res => {
        console.log(res, "客户总监审核")
        this.receiptReviewLoading = false;
        if (res.code == 200) {
          this.getReceiptDetails();
          this.isExamine = false;
          this.$router.push({
            path: '/collectionPaymentSkdetailPage',
            query: {
              id: this.$route.query.id,
              payment_type: this.$route.query.payment_type
            }
          })
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 总经理审核
    reexamineExamination(obj) {
      this.receiptReviewLoading = true;
      companyApi.reexamineExamination(obj).then(res => {
        console.log(res, "客户总监审核")
        this.receiptReviewLoading = false;
        if (res.code == 200) {
          this.getReceiptDetails();
          this.isExamine = false;
          this.$router.push({
            path: '/collectionPaymentSkdetailPage',
            query: {
              id: this.$route.query.id,
              payment_type: this.$route.query.payment_type
            }
          })
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 收款单同意（财务）
    receiptReviewPassed(obj) {
      this.receiptReviewLoading = true;
      companyApi.receiptReviewPassed(obj).then(res => {
        console.log(res, "收款单同意")
        this.receiptReviewLoading = false;
        if (res.code == 200) {
          this.getReceiptDetails();
          this.isExamine = false;
          this.$router.push({
            path: '/collectionPaymentSkdetailPage',
            query: {
              id: this.$route.query.id,
              payment_type: this.$route.query.payment_type
            }
          })
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 收款单拒绝（财务）
    receiptReviewRejected(obj) {
      this.receiptReviewLoading = true;
      companyApi.receiptReviewRejected(obj).then(res => {
        console.log(res, "收款单拒绝")
        this.receiptReviewLoading = false;
        if (res.code == 200) {
          this.getReceiptDetails();
          this.isExamine = false;
          this.$router.push({
            path: '/collectionPaymentSkdetailPage',
            query: {
              id: this.$route.query.id,
              payment_type: this.$route.query.payment_type
            }
          })
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 去项目详情
    goToProjectFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/projectDetailNew',
        query: {
          id: this.dataObj.project_id
        }
      })
    },
    // 去结算单详情
    goToSettlementFunc() {
      this.$router.push({
        path: '/settlemenDetailPage',
        query: {
          id: this.dataObj.project_id
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
// @import "./index.scss";
// @import '@/styles/detailFlex.scss';
@import '@/styles/detail.scss';
</style>